<!DOCTYPE html>
<html ng-app='app'>

<head>
  <meta charset="utf-8">
  <title translate="load.static.TITLE">Load static files</title>
  <style>
    body { text-align: center; }
    .translate-cloak {
      background: red;
    }
  </style>
</head>

<body ng-controller="ctrl" translate-cloak>

  <p>
    <a href="#" ng-click="setLang('en_US')">English</a>
    |
    <a href="#" ng-click="setLang('ru_RU')">Русский</a>
  </p>

  <h1>{{ 'load.static.HEADER' | translate }}</h1>
  <h2 translate>load.static.SUBHEADER</h2>
  <section id="extendedContent">
  </section>

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../src/translate.js"></script>
<script src="../src/service/default-interpolation.js"></script>
<script src="../src/service/sanitization.js"></script>
<script src="../src/service/handler-log.js"></script>
<script src="../src/service/loader-static-files.js"></script>


<script src="../src/service/storage-key.js"></script>
<script src="../src/service/storage-local.js"></script>
<script src="../src/service/storage-cookie.js"></script>
<script src="../src/service/translate.js"></script>
<script src="../src/directive/translate.js"></script>
<script src="../src/directive/translate-cloak.js"></script>
<script src="../src/filter/translate.js"></script>
<script>
angular.module('app', ['pascalprecht.translate', 'ngCookies'])

.config(['$translateProvider', '$provide', function($translateProvider, $provide){

    $translateProvider.useLoader('customLoader');

  $provide.factory('customLoader', ['$q', '$timeout', function ($q, $timeout) {
    return function (options) {
      var deferred = $q.defer();

      $timeout(function () {
        deferred.resolve({
          "load": {
            "static": {
              "TITLE" : "How to load static files?",
              "HEADER" : "The module can lazzy load a translations table when it's needed.",
              "SUBHEADER" : "So, you can load only those languages, which will be used.",
              "TEXT" : "This is only some text to fill the space.",
              "ONLY_EN": "only english",
              "EN_RU": "EN and RU - EN Edition"
            }
          }
        });
        }, 2000);

      return deferred.promise;
    };
  }]);
  // Tell the module what language to use by default
  $translateProvider.preferredLanguage('en_US');

  // Tell the module to store the language in the cookies
  $translateProvider.useCookieStorage();

}])

.controller('ctrl', ['$scope', '$translate', '$timeout', '$compile', function($scope, $translate, $timeout, $compile) {

  $scope.setLang = function(langKey) {
    // You can change the language during runtime
    $translate.use(langKey);
  };

  $timeout(function () {
    var elem = $compile('<div translate-cloak><h2>Simple cloak after language was already loaded</h2><p translate>load.static.TEXT</p></div>')($scope);
    angular.element(document.body).find('section').append(elem);

    var elem = $compile('<div translate-cloak="load.static.TEXT"><h2>Simple cloak with fine-tuned key</h2><p translate>load.static.TEXT</p></div>')($scope);
    angular.element(document.body).find('section').append(elem);
  }, 3000);

}]);
</script>

</body>
</html>
